import styled from '@emotion/styled';
import { useDocumentTitle } from 'utils';
import { KanbanColumn } from './kanban-column';
import { useProjectInUrl, useKanbanSearchParams } from './util';
import { useKanban } from "utils/kanban";
import { SearchPanel } from './search-panel';
import { ScreenContainer } from "components/lib";
import { TaskModal } from './task-modal';
import { CreateKanban } from './create-kanban';

export const KanbanScreen = () => {
  useDocumentTitle('看板列表');
  const { data: kanbans } = useKanban(useKanbanSearchParams());
  const { data: project } = useProjectInUrl();
  return (
    <ScreenContainer>
      <h1>{project?.name}看板</h1>
      <SearchPanel />
      <Container>
        {
          kanbans?.map(kanban => {
            return <KanbanColumn kanban={kanban} key={kanban.id} />
          })
        }
        <CreateKanban />
      </Container>
      <TaskModal />
    </ScreenContainer>
  );
};

const Container = styled.div`
  display: flex;
  overflow-x: scroll;
  flex: 1;
`